﻿@page "/components/circulartimepicker"
@page "/components/circular-time-picker"
@using Bit.BlazorUI.Demo.Client.Core.Helpers

<PageOutlet Url="components/circulartimepicker"
            Title="CircularTimePicker"
            Description="circulartimepicker component of the bit BlazorUI components" />

<DemoPage Name="CircularTimePicker"
          Description="A BitCircularTimePicker offers a drop-down control that’s optimized for picking a single time from a clock view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available times."
          Parameters="componentParameters"
          SubEnums="componentSubEnums"
          SubClasses="componentSubClasses"
          GitHubUrl="Inputs/CircularTimePicker/BitCircularTimePicker.razor"
          GitHubDemoUrl="Inputs/CircularTimePicker/BitCircularTimePickerDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
        <div>Explore basic configurations of the BitCircularTimePicker, including labels, placeholders, icons, and time format feature.</div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker Label="Basic CircularTimePicker" />
            <br /><br />
            <BitCircularTimePicker Label="Disabled" IsEnabled="false" />
            <br /><br />
            <BitCircularTimePicker Label="Required" Required />
            <br /><br />
            <BitCircularTimePicker Label="PlaceHolder" Placeholder="Select a time" />
            <br /><br />
            <BitCircularTimePicker Label="TimeFormat (AM/PM)" TimeFormat="BitTimeFormat.TwelveHours" />
            <br /><br />
            <BitCircularTimePicker Label="Custom icon" IconName="@BitIconName.Airplane" />
        </div>
    </DemoExample>

    <DemoExample Title="Text input" RazorCode="@example2RazorCode" Id="example2">
        <div class="example-desc">
            The input field will open the BitCircularTimePicker, and clicking the field again will dismiss the BitCircularTimePicker and
            allow text input. Please note to use this feature, you must enter the date in the exact <code>DateFormat</code> provided for the BitCircularTimePicker.
        </div>
        <div class="example-content">
            <BitCircularTimePicker Label="Text input allowed"
                                   AllowTextInput
                                   ValueFormat="hh:mm"
                                   Placeholder="Enter a time (hh:mm)" />
        </div>
    </DemoExample>

    <DemoExample Title="Value format" RazorCode="@example3RazorCode" Id="example3">
        <div class="example-desc">
            Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed.
            In this example, we are formatting and parsing times as hh-mm.ss.
        </div>
        <div class="example-content">
            <BitCircularTimePicker Label="Formatted time"
                                   ValueFormat="hh-mm.ss"
                                   Placeholder="Select a time" />
        </div>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Bind a selected time to a model or view, allowing two-way data binding with the BitCircularTimePicker.</div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker @bind-Value="@selectedTime" />
        </div>
        <br />
        <div>Selected time: @selectedTime.ToString()</div>
    </DemoExample>

    <DemoExample Title="Culture" RazorCode="@example6RazorCode" Id="example6">
        <div>
            By default, BitCircularTimePicker picks the current culture. But you can provide your own instance of CultureInfo for any custom culture.
            <br />
            You also can use our
            <BitLink Href="https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Helpers/CultureInfoHelper.cs" Target="_blank">
                CultureInfoHelper
            </BitLink> class or check its code to see how to create a custom culture.
        </div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker Label="fa-IR culture"
                                   TimeFormat="BitTimeFormat.TwelveHours"
                                   Culture="CultureInfoHelper.GetFaIrCultureWithFarsiNames()" />
        </div>
    </DemoExample>

    <DemoExample Title="Standalone" RazorCode="@example7RazorCode" Id="example7">
        <div>Use the BitCircularTimePicker in a standalone mode, allowing it to function independently without a surrounding form or container.</div>
        <br />
        <div class="example-content-standalone">
            <BitCircularTimePicker Label="Basic CircularTimePicker" Standalone />
            <br /><br />
            <BitCircularTimePicker Label="Disabled" IsEnabled="false" Standalone />
            <br /><br />
            <BitCircularTimePicker Label="PlaceHolder" Placeholder="Select a time" Standalone />
            <br /><br />
            <BitCircularTimePicker Label="TimeFormat (AM/PM)" TimeFormat="BitTimeFormat.TwelveHours" Standalone />
        </div>
    </DemoExample>

    <DemoExample Title="ReadOnly" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
        <div>The ReadOnly parameter makes the time picker input non-editable, preventing users from manually changing the time value.</div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker Label="Basic" ReadOnly @bind-Value="@readOnlyTime" />
            <br /><br />
            <BitCircularTimePicker Label="Text input allowed" ReadOnly AllowTextInput @bind-Value="@readOnlyTime" />
        </div>
        <br /><br />
        <div class="example-content-standalone">
            <BitCircularTimePicker Label="Standalone" Standalone ReadOnly @bind-Value="@readOnlyTime" />
            <br /><br />
            <BitCircularTimePicker Label="Standalone TimeFormat (AM/PM)" Standalone ReadOnly TimeFormat="BitTimeFormat.TwelveHours" @bind-Value="@readOnlyTime" />
        </div>
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div class="example-desc">
            In this example, the callout of the BitCircularTimePicker would be opened and closed using an icon button which is customely located in the label.
            This functionality has been implemented using a public API provided in the BitCircularTimePicker.
        </div>
        <div class="example-content">
            <BitCircularTimePicker @ref="circularTimePicker">
                <LabelTemplate>
                    Custom label <BitButton Variant="BitVariant.Text" IconName="@BitIconName.AlarmClock" OnClick="OpenCallout"></BitButton>
                </LabelTemplate>
            </BitCircularTimePicker>
            <br /><br /><br />
            <BitCircularTimePicker Label="Custom left-handed icon"
                                   IconLocation="BitIconLocation.Left"
                                   Placeholder="Select a time">
                <IconTemplate>
                    <img src="https://img.icons8.com/fluency/2x/clock.png" width="24" height="24" />
                </IconTemplate>
            </BitCircularTimePicker>
        </div>
    </DemoExample>

    <DemoExample Title="Responsive" RazorCode="@example10RazorCode" Id="example10">
        <div>Enable responsive design for the BitCircularTimePicker, allowing it to adjust its layout and appearance based on the screen size.</div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker Label="Response CircularTimePicker"
                                   Placeholder="Select a time"
                                   Responsive />
        </div>
    </DemoExample>

    <DemoExample Title="Validation" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
        <div>Implement form validation with BitCircularTimePicker using data annotations, ensuring the user selects a valid date before submitting the form.</div>
        <br />
        <div class="example-content">
            <EditForm Model="formValidationCircularTimePickerModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
                <DataAnnotationsValidator />

                <div class="validation-summary">
                    <ValidationSummary />
                </div>
                <div>
                    <BitCircularTimePicker @bind-Value="formValidationCircularTimePickerModel.Time"
                                           AllowTextInput="true"
                                           Placeholder="Select a time"
                                           Label="Time required" />
                    <ValidationMessage For="@(() => formValidationCircularTimePickerModel.Time)" />
                </div>
                <br />
                <BitButton ButtonType="BitButtonType.Submit">
                    Submit
                </BitButton>
            </EditForm>

            @if (string.IsNullOrEmpty(successMessage) is false)
            {
                <BitMessage Color="BitColor.Success">@successMessage</BitMessage>
            }
        </div>
        <br /><br />

        <div class="example-desc">The custom invalid error message will show when an invalid time is entered.</div>
        <div class="example-content">
            <EditForm Model="formValidationCircularTimePickerModel">
                <DataAnnotationsValidator />
                <div>
                    <BitCircularTimePicker @bind-Value="formValidationCircularTimePickerModel.Time"
                                           AllowTextInput="true"
                                           Label="Custom Invalid Error Message"
                                           InvalidErrorMessage="Invalid Time!!!" />
                    <ValidationMessage For="@(() => formValidationCircularTimePickerModel.Time)" />
                </div>
                <br />
                <div class="validation-summary">
                    <ValidationSummary />
                </div>
            </EditForm>
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
        <div>Explore styling and class customization for BitCircularTimePicker, including component styles, custom classes, and detailed styles.</div>
        <br /><br />
        <div>Component's Style & Class:</div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker Style="margin: 1rem; box-shadow: dodgerblue 0 0 1rem;" />
            <br />
            <BitCircularTimePicker Class="custom-class" />
        </div>
        <br /><br /><br />
        <div><b>Styles</b> & <b>Classes</b>:</div>
        <br />
        <div class="example-content">
            <BitCircularTimePicker Styles="@(new() { Root = "margin-inline: 1rem;",
                                                     Focused = "--focused-background: #b2b2b25a;",
                                                     Input = "padding: 0.5rem;",
                                                     InputContainer = "background: var(--focused-background);",
                                                     HourButton = "color: gray;",
                                                     MinuteButton = "color: gray;",
                                                     HourMinuteSeparator = "color: gray;",
                                                     Toolbar = "background-color: transparent;",
                                                     ClockFace = "box-shadow: dodgerblue 0 0 1rem;",
                                                     ClockPointerThumb = "background-color: blue;" })" />
            <br />
            <BitCircularTimePicker @bind-Value="@classesValue"
                                   Label="Select a date"
                                   Classes="@(new() { Root = "custom-root",
                                                      Focused = "custom-focus",
                                                      Input = "custom-input",
                                                      InputContainer = "custom-input-container",
                                                      Label = $"custom-label{(classesValue is null ? string.Empty : " custom-label-top")}",
                                                      Toolbar = "custom-toolbar",
                                                      ClockPin = "custom-clock-pin",
                                                      ClockFace = "custom-clock-face",
                                                      ClockNumber = "custom-clock-number",
                                                      ClockPointer = "custom-clock-pointer",
                                                      ClockPointerThumb = "custom-clock-pointer-thumb",
                                                      ClockSelectedNumber = "custom-clock-selected-number",
                                                      ClockPointerThumbMinute = "custom-clock-pointer-thumb-minute" })" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
        <div>Use BitCircularTimePicker in a right-to-left (RTL) layout.</div>
        <br />
        <div dir="rtl">
            <div class="example-content">
                <BitCircularTimePicker Dir="BitDir.Rtl" />
            </div>
        </div>
    </DemoExample>
</DemoPage>